<template>
  <div style="padding-top: 20px">
    <el-form>
      <div class="item" style="width: calc(100% - 20px)">
        <el-form-item style="width: 100%" label="文件:">
          <div style="display: flex">
            <el-upload
              class="upload-demo"
              accept
              list-type="picture"
              :show-file-list="false"
              ref="upload"
              :file-list="fileList"
              action=""
              :on-preview="handlePictureCardPreview"
              :on-remove="handleChange"
              :on-change="handleChange"
              :auto-upload="false"
            >
              <el-button
                v-if="!dontAction"
                slot="trigger"
                size="small"
                type="primary"
                >选取文件</el-button
              >
            </el-upload>
            <el-table :data="fileList" style="margin-left: 20px; width: 50vw">
              <el-table-column label="文件名称">
                <template slot-scope="scope">
                  {{
                    scope.row.name
                      ? scope.row.name.substring(
                          0,
                          scope.row.name.lastIndexOf(".")
                        )
                      : scope.row.fileName.substring(
                          0,
                          scope.row.fileName.lastIndexOf(".")
                        )
                  }}
                </template>
              </el-table-column>
              <el-table-column label="文件类型">
                <template slot-scope="scope">
                  {{
                    scope.row.name
                      ? scope.row.name.substring(
                          scope.row.name.lastIndexOf(".") + 1,
                          scope.row.name.length
                        )
                      : scope.row.fileName.substring(
                          scope.row.fileName.lastIndexOf(".") + 1,
                          scope.row.fileName.length
                        )
                  }}
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="100"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="previewFile(scope.row)"
                    >预览
                  </el-button>
                  <el-button
                    v-if="!dontAction"
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="DeleteFile(scope.row, scope.$index)"
                    >删除
                  </el-button>
                  <el-button
                    v-if="!scope.row.name"
                    size="mini"
                    type="text"
                    icon="el-icon-download"
                    @click="downloadFile(scope.row)"
                    >下载
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <el-dialog :visible.sync="dialogVisible">
      <div style="max-height: 90vh; overflow-y: scroll">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { uploadFile } from "@/api/system/upload.js";
export default {
  name: "fileList",
  components: {},
  props: {
    fileList: {
      type: Array,
      default: [],
    },
    dontAction: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      base_url: process.env.VUE_APP_BASE_API,
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  created() {},
  methods: {
    upload() {
      if (this.fileList && this.fileList.length) {
        let param = new FormData();
        param.append("key", "file");
        let list = [];
        this.fileList.forEach((item) => {
          if (item.id) {
            list.push(item);
          } else {
            param.append("file", item.raw);
          }
        });
        uploadFile(param)
          .then((res) => {
            this.$emit("upload", list.concat(res.data));
          })
          .catch((e) => {
            this.$emit("upload", false);
          });
      } else {
        this.$emit("upload", []);
      }
    },
    downloadFile(item) {
      let url =
        process.env.VUE_APP_BASE_API +
        "/common/download/resource?filePath=" +
        encodeURI(item.filePath) +
        "&downloadName=" +
        encodeURI(item.fileName) +
        "&delete=" +
        false;
      window.open(url);
    },
    //文件预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //文件列表变化
    handleChange(res, fileList) {
      this.$emit("changeFileList", fileList);
    },
    previewFile(item) {
      if (!item.name) {
        item.name = item.fileName;
      }
      if (
        item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) ==
          "gif" ||
        item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) ==
          "jpeg" ||
        item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) ==
          "jpg" ||
        item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) ==
          "png"
      ) {
        this.dialogImageUrl = item.url || this.base_url + item.filePath;
        this.dialogVisible = true;
        return;
      } else {
        this.$message.error(`仅限后缀名为 gif、jpeg、jpg、 png可预览`);
      }
    },
    DeleteFile(data, index) {
      let fileList = this.fileList.filter((item) => {
        if (item.uid == data.uid) {
        } else {
          return item;
        }
      });
      this.$emit("changeFileList", fileList);
    },
  },
};
</script>
<style scoped lang="less">
</style>
